<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="">
    <input type="button" value="发送短信" class="btn">
</body>

<script>
    var btn = document.querySelector('.btn');
    var timer1 = null;
    var timer2 = null;
    var i = 0;
    btn.addEventListener('click', function () {
        timer1 = setTimeout(fn1, 5000);
        i = 5;
        timer2 = setInterval(fn2, 1000);
        btn.value = '请' + i + '秒后再点击';
        btn.disabled = 'true';
    })
    function fn1() {
        console.log(timer2);
        window.clearInterval(timer2);
        btn.disabled = '';
        btn.value = '发送短信';
    }
    function fn2() {
        i--;
        btn.value = '请' + i + '秒后再点击';

    }
</script>

</html>